<template>
<div id="content">
	<div class="cont-seach">
		<router-link to="/home/city" class="cCtiy">广州<span class="iconfont icon-xia"></span></router-link>
		<router-link to="/home/search"><input type="search" name="search" id="search" value="" placeholder="影片/影院/影人，任你搜" /></router-link>
		<strong class="iconfont icon-sousuo"></strong>
	</div>
	<!--热播电影-->
	<div class="cont-hotMovies">
		<router-link to="/home/hot"><h2>正在热映（77部）<span class="iconfont icon-you"></span></h2></router-link>
		<ul>
			<router-link v-for="(item, index) in hotMovies" :to="{ name: 'mdetail', params: { classid: item.id }}" key="index" tag="li">
				<p class="score">{{item.r}}</p>
				<img :src="item.img" class="imgpic"/>
				<p class="title">{{item.t}}</p>
			</router-link>
		</ul>
	</div>
	<!--即将上映-->
	<router-link to="/home/coming"><h3>即将上映（64部）<span class="iconfont icon-you"></span></h3></router-link>
	
	
	<!--数据线-->
	<p id="linebase"></p>
	
	<!--今日热点-->
	<div class="todayhot">
		<a href="javascript:;">今日热点</a>
		<ul>
			<router-link v-for="(item, index) in todayMovies" :to="{ name: 'todaydetail', params: { classid: item.id }}" key="index" tag="li">
				<img :src="item.img" class="todaypic"/>
				<p class="titletop">{{item.title}}</p>
				<p class="titledown">{{item.desc}}</p>
				<p class="time">{{item.publishTime}}</p>
			</router-link>
		</ul>
	</div>
	<span class="iconfont icon-shang" id="top" @click="tophide()"></span>
</div>
</template>

<script>
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	import hotmovies from "@/json/hotmovies.json"
	import todaymovies from "@/json/todaymovies.json"
	export default{
		data(){
			return{
				hotMovies:[],
				todayMovies:[]
			}
		},
		mounted(){
			footerToggle.show();
			headerToggle.show();
			this.hotMovies = hotmovies.ms;
			this.todayMovies = todaymovies.hotPoints;
			//console.log(todaymovies.hotPoints[0].id,todaymovies.hotPoints[1].id,todaymovies.hotPoints[2].id)
			

			//滚动事件
			document.addEventListener('scroll',function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 				if(scrollTop>300){ 
					document.getElementById("top").style.display = "block"; 
				}else{
					document.getElementById("top").style.display = "none";
						
				};
			})
		},
		methods:{
			tophide(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
				if(scrollTop>300){
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
		}
		},
		components:{

		}
	}
</script>

<style scoped lang="scss">
@import "~@/scss/main.scss";
#content{
	overflow: auto;

.cont-seach{
	position:relative;
	@include rect(100%, 0.65rem);
	background:#F6F6F6;
	.cCtiy{
		float:left;
		font-size:20px;
		margin:10px 10px 0 10px;
		line-height: 55px;
		color:#333;
		.iconfont{
			margin: 0 5px;
		}
	}
	#search{
		float:left;
		width:267px;
		height:43px;
		border-radius:10px;
		border:1px solid #ccc;
		font-size: 16px;
		text-indent: 26px;
		margin-top:15px;
	}
	.icon-sousuo{
		position:absolute;
		left:92px;
		top:24px
	}
}

/*热播电影*/
.cont-hotMovies{
	@include rect(3.79rem, 3.73rem);
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	padding:10px 10px 10px 19px;
	h2{
		color:#000000;
		font-size: 20px;
		.icon-you{
			float:right;
			margin-right:30px;
		}
	}
	ul{
		li{
			margin:3px;
			position: relative;
			float:left;
			.imgpic{
				@include rect(0.78rem, 1.18rem)
			}
			.score{
				position: absolute;
				display: inline-block;	
				@include rect(0.24rem, 0.24rem);
				background:#659D0E;
				text-align:center;
				line-height:24px;
				color:#fff;
				right:0;
				top:2px;
			}
			.title{
				@include rect(0.78rem, 0.38rem);
				margin-top:5px;
				text-align: center;
			}
		}
	}
}
/*即将上映*/
h3{
		color:#000000;
		font-size: 20px;
		margin:10px 19px;
		.icon-you{
			float:right;
			margin-right:15px;
		}
		}
		
#linebase{
	@include rect(100%, 0.15rem);
	background:#F6F6F6;
}

/*今日热点*/
.todayhot{
	@include rect(100%, 4.15rem);
	a{
		float:left;
		@include rect(100%, 0.5rem);
		font-size: 20px;
		margin:10px 19px 0;
		color:#333;
	}
	ul{
		li{
			float:left;
			@include rect(100%, auto);
			margin-top:20px;
			.todaypic{
				@include rect(1.35rem, 0.95rem);
				float:left;
			}
			.titletop{
				float:left;
				font-weight: 900;
				font-size:18px;
				margin-left:20px;
				@include rect(55%, auto)
			}
			.titledown{
				float:left;
				font-size:14px;
				margin-left:20px;
				@include rect(55%, auto)
			}
			.time{
				float:left;
				font-size:14px;
				margin-left:20px;
				@include rect(55%, auto)
			}
		}
	}
}

.icon-shang{
		position:fixed;
		display:none;
		right:10px;
		bottom: 10px;
		width:40px;
		height:40px;
		font-size:30px;
		background:rgba(96,96,96,.4);
		border-radius: 20px;
		line-height:40px;
		text-align: center;
		color:#fff;
	}

}
</style>